import React from 'react'
import { 
    ShoppingWrapper,
    TabWrapper,
    Tab,TabItem,
    GoodsList,
    GoodsItem
} from './style'
import classnames from 'classnames'

const Shopping =({activityKey,setActivityKey,goodsData})=>{

    const onsetActivityKey=(key)=>{
        setActivityKey(key)
        console.log(key);
    }
    return(
        <ShoppingWrapper>
            <TabWrapper>
                <Tab>
                    <TabItem onClick={onsetActivityKey.bind(null,'caodian')}
                    className={classnames({active:activityKey =='caodian'})}>
                        <a href="#"><span>潮店精选</span></a>
                    </TabItem>
                    <TabItem onClick={onsetActivityKey.bind(null,'fenqi')}
                    className={classnames({active:activityKey =='fenqi'})}>
                        <a href="#"><span>分期免息</span></a>
                    </TabItem>
                    <TabItem onClick={onsetActivityKey.bind(null,'51yuan')}
                    className={classnames({active:activityKey =='51yuan'})}>
                        <a href="#"><span>51元封顶</span></a>
                    </TabItem>
                    <TabItem onClick={onsetActivityKey.bind(null,'haowu')}
                    className={classnames({active:activityKey =='haowu'})}>
                        <a href="#"><span>好物直播</span></a>
                    </TabItem>
                </Tab> 
            </TabWrapper>
            <GoodsList>
                {
                    goodsData.map(({id,tag,title,price})=>(
                        tag==activityKey && <GoodsItem key={id}>
                            <a href="" className='goods_img'>
                                <div><img src="https://img10.360buyimg.com/n7/jfs/t1/200663/19/21581/70427/625e847fE885fe4e1/cfa20bdc05e3def7.jpg" alt="" /></div>    
                            </a>
                            <a href="" className='goods_title'><div>{title}</div></a>
                            <ul>
                                <div>
                                    <li>券</li>
                                    <li>立减XX</li>
                                </div>
                            </ul>
                            <div className='price'>￥<span>{price}</span></div>
                        </GoodsItem>
                    ))
                }

            </GoodsList>
        </ShoppingWrapper>
    )
}
export default Shopping